{include file="common/header-top" /}

<link rel="stylesheet" href="/__FRONT__/css/job-index.css?_2019">


<div id='app' v-cloak>

    <van-nav-bar title="二手市场" left-arrow @click-left="goBack" left-text="返回"></van-nav-bar>


        <!-- 搜索栏 start -->
        <van-row>
            <van-col span="24">
                <van-search
                        v-model="searchValue"
                        placeholder="请输入需要查找的商品"
                        show-action
                        shape="round"
                        @search="clickSearch"
                >
                    <van-button round slot="action" type="primary" size="small" @click="clickSearch">搜索</van-button>
                </van-search>
            </van-col>
        </van-row>
        <!-- 搜索栏 end -->


        <!--轮播-->
        <van-swipe :autoplay="1500" indicator-color="white" :height="100">
            <van-swipe-item v-for="(item, index) in topBanner" :key="index" @click="swipeClick(item)">
                <van-image :src="item.logo" v-lazy="item.logo" :lazy-load="false"/>
            </van-swipe-item>
        </van-swipe>
        <!--轮播-->



        <!--二手类型-->
        <van-row>
            <van-grid :column-num="6" square :border="false">
                <van-grid-item
                        v-for="(item, index) in marketType"
                        :icon="item.img"
                        :text="item.name"
                        @click="confirmSelectMarketType(item.name, item.id)"
                        v-if="index < 5"
                ></van-grid-item>
                <van-grid-item
                        icon="/__FRONT__/images/icon/news-more.png"
                        text="更多"
                        @click="clickSelect(0, 'more')"
                ></van-grid-item>
            </van-grid>
        </van-row>
        <!--二手类型-->

        <!--筛选-->
        <van-row id="selectDiv" style="margin-top: 3%;">
            <van-tabs @click="clickSelect" title-active-color="#7d7e80" title-inactive-color="#7d7e80" line-height="0px">
                <van-tab>
                    <div slot="title">
                        {{selectItems.marketTypeValue}}<van-icon name="arrow-down" />
                    </div>
                </van-tab>
                <van-tab>
                    <div slot="title">
                        {{getShowArea}}<van-icon name="arrow-down" />
                    </div>
                </van-tab>
            </van-tabs>
        </van-row>
        <!--筛选-->


        <!--二手商品列表-->
        <van-list
                v-model="goodsListLoading"
                :finished="goodsListFinished"
                finished-text="没有更多了"
                @load="getGoodsList"
        >
            <van-row v-for="item in goodsList" class="job-item">
                <van-card
                    :num="item.number"
                    :title="item.name"
                    :thumb="item.logo"
                    :price="item.money"
                    :origin-price="item.oprice"
                    @click="goGoodsDetail(item)"
                >
                    <div slot="tags">
                        <van-tag type="success">{{item.marketTypeName}}</van-tag>
                    </div>
                    <div slot="footer">
                        <van-button size="small">联系卖家</van-button>
                    </div>
                </van-card>
            </van-row>
        </van-list>

        <!--二手商品列表-->




    {include file="common/foot-bar" /}



    <!--筛选popup-->
    <van-popup
            v-model="showScreenPop"
            position="top"
    >
        <van-row>
            <van-tabs v-model="whichSelectTab">
                <!--岗位筛选 start -->
                <van-tab>
                    <div slot="title">
                        商品类型<van-icon name="arrow-down" />
                    </div>
                    <van-picker
                            show-toolbar
                            :default-index="{$marketTypeInfo.id|default=0}"
                            :columns="selectMarketTypeList"
                            @cancel="showScreenPop = false"
                            @confirm="confirmSelectMarketType"
                    />
                </van-tab>
                <!--岗位筛选 end -->

                <!--地区筛选 start -->
                <van-tab>
                    <div slot="title">
                        地区<van-icon name="arrow-down" />
                    </div>
                    <van-area
                            :area-list="openAreaList"
                            @cancel="showScreenPop = false"
                            @confirm="selectArea"
                    ></van-area>
                </van-tab>
                <!--地区筛选 end -->

            </van-tabs>
        </van-row>



    </van-popup>
    <!--筛选popup-->

</div>


<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:2,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                inWechat: {$inWechat},

                //顶部banner
                topBanner: [],

                marketType:[],
                selectMarketTypeList: [],

                openAreaList: {},
                whichSelectTab: 0,
                searchValue: '',



                /**
                 * 筛选开始
                 */
                selectItems:{
                    marketTypeValue:"{$marketTypeInfo.name|default='商品类型'}",
                    marketType: '{$marketTypeInfo.id|default=0}',
                    areaValue: '',
                    area:''
                },
                showScreenPop:false,

                //全部兼职列表集
                goodsList: [],
                goodsListPage: 1,
                goodsListPageSize: 8,
                goodsListLoading: false,
                goodsListFinished: false,

            };
        },
        created(){

            //获取当前定位城市
            if (this.inWechat) {
                this.getWechatLocation();
            }


            //广告banner接口数据
            axiosRequest.get('/api/common/bannerItems', {params:{locationId:2}}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.topBanner = response.data;
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });

            //获取二手商品类型列表
            axiosRequest.get('/api/market/marketType').then(function (response) {
                if (response.code == 200) {
                    response.data.forEach(function (item) {
                        item.style = '';
                    });
                    vm.$data.marketType = response.data;
                    vm.selectMarketType();
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });

            //获取系统中开放的地区
            axiosRequest.get('/api/common/openArea').then(function (response) {
                if (response.code == 200) {
                    vm.$data.openAreaList = response.data;
                }
            });

        },

        computed:{
            getShowArea(){
                if (this.selectItems.area) {
                    return  this.selectItems.area;
                }
                return '区域';
            }
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },


            //搜索兼职
            clickSearch() {
                if (this.searchValue) {
                    this.clearGoodsList();
                    this.getGoodsList();
                } else {
                    vant.Toast.fail('请输入需要搜索的内容！');
                }
                return false;
            },


            clickSelect(name, title){
                this.whichSelectTab = name;
                switch (name) {
                    case 0:
                        this.selectMarketType();
                        break;
                    case 1:
                        break;
                    default:
                        break;
                }
                this.showScreenPop = true;
            },
            //岗位选择
            selectMarketType(){
                if (!this.selectMarketTypeList.length) {
                    this.selectMarketTypeList = ['全部'];
                    this.marketType.forEach(function (item) {
                        vm.$data.selectMarketTypeList.push(item.name);
                    });
                }
            },
            confirmSelectMarketType(name, index){
                if (index != this.selectItems.marketType) {
                    this.selectItems.marketType = index;
                    this.selectItems.marketTypeValue = name;
                    //重新填充数据
                    this.clearGoodsList();
                    this.getGoodsList();
                }
                this.showScreenPop = false;
                return false;
            },
            //地区选择
            selectArea(item){
                this.selectItems.areaValue = '';
                item.forEach(function(one){
                    vm.$data.selectItems.areaValue += one.name + '|';
                });

                this.clearGoodsList();
                this.getGoodsList();

                this.showScreenPop = false;
            },


            //清除二手列表，重置分页
            clearGoodsList(){
                this.goodsList = [];
                this.goodsListPage = 1;
                this.goodsListPageSize = 8;
                this.goodsListLoading = true;
                this.goodsListFinished = false;
            },

            //获取二手商品列表
            getGoodsList() {
                var params = {
                    page: this.goodsListPage,
                    pageSize: this.goodsListPageSize,
                    marketType: this.selectItems.marketType,
                    areaValue: this.selectItems.areaValue,
                    searchName: this.searchValue,
                    is_show: 1
                };
                axiosRequest.get('/api/market/goodsList',{params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.goodsList) {
                            response.data.goodsList.forEach(function(item){
                                vm.$data.goodsList.push(item)
                            });
                            vm.$data.goodsListLoading = false;
                            vm.$data.goodsListPage += 1;


                            if (response.data.goodsList.length < vm.$data.goodsListPageSize) {
                                vm.$data.goodsListFinished = true;
                                vm.$data.goodsListLoading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.goodsListFinished = true;
                            vm.$data.goodsListLoading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });

            },

            goGoodsDetail(item){
                window.location.href = '/index/Market/goodsDetail?id=' + item.id;
            },

            getWechatLocation(){
                //微信js SDK 配置
                wx.config({
                    debug: false,
                    appId: '{$wechatJsSDK.appId|default=""}',
                    timestamp: '{$wechatJsSDK.timestamp|default=""}',
                    nonceStr: '{$wechatJsSDK.nonceStr|default=""}',
                    signature: '{$wechatJsSDK.signature|default=""}',
                    jsApiList: [
                        'getLocation',
                    ]
                });
                wx.ready(function () {
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            var postData = {
                                latitude: res.latitude,
                                longitude: res.longitude
                            };
                            axiosRequest.post('/api/common/transLocation', postData).then(function (response) {
                                if (response.code == 200) {
                                    vm.$data.selectItems.area = response.data.cityName;
                                    vm.$data.selectItems.areaValue = response.data.areaValue;
                                    vm.clearGoodsList();
                                    vm.getGoodsList();
                                } else {
                                    vant.Notify({type:'danger', message:response.msg});
                                }
                            });

                        },
                        cancel: function (res) {
                            vant.Notify({ type: 'danger', message: '您拒绝授权获取地理位置!'});
                        }
                    });
                });
                //初始化jsapi接口 状态
                wx.error(function (res) {
                    vant.Notify({ type: 'danger', message: '当前客户端版本不支持微信SDK!'});
                });
            },

        },


    });

</script>


{include file="common/foot-bottom" /}

